import React, { useRef, useState } from'react';
import axios from 'axios';

export default function Cart() {
    // 用于存储选中的商品列表
    const [selectedProducts, setSelectedProducts] = useState([]);
    // 用于存储选中的支付方式
    const [paymentMethod, setPaymentMethod] = useState('alipay');
    let oForm = useRef();
    const [isLoading, setIsLoading] = useState(false);

    // 处理商品选择的函数
    const handleProductSelect = (product) => {
        if (selectedProducts.some(p => p.id === product.id)) {
            // 如果已选中，移除该商品
            setSelectedProducts(selectedProducts.filter(p => p.id!== product.id));
        } else {
            // 如果未选中，添加该商品
            setSelectedProducts([...selectedProducts, product]);
        }
    };

    // 处理支付方式选择的函数
    const handlePaymentMethodSelect = (method) => {
        setPaymentMethod(method);
    };

    const handlePaymentClick = async () => {
        setIsLoading(true);
        try {
            const totalAmount = selectedProducts.reduce((acc, product) => acc + product.price, 0);
            const response = await axios.post('http://localhost:3001/alipay', {
                paymentMethod,
                products: selectedProducts.map(p => p.id),
                totalAmount
            });
            console.log(response.data);
            oForm.current.innerHTML = response.data;
            document.forms[0].submit();
        } catch (error) {
            console.error('支付请求出错:', error);
        } finally {
            setIsLoading(false);
        }
    };

    return (
        <div style={{
            backgroundColor: '#f4f4f4',
            padding: '20px',
            fontFamily: 'Arial, sans-serif'
        }}>
            <h2 style={{ marginBottom: '20px' }}>商品选择</h2>
            <div style={{ marginBottom: '30px' }}>
                {products.map(product => (
                    <div key={product.id} style={{
                        border: '1px solid #ccc',
                        padding: '15px',
                        borderRadius: '5px',
                        marginBottom: '15px',
                        display: 'flex',
                        justifyContent: 'space-between',
                        alignItems: 'center'
                    }}>
                        <div>
                            <h3>{product.name}</h3>
                            <p>价格: {product.price} 元</p>
                        </div>
                        <input
                            type="checkbox"
                            checked={selectedProducts.some(p => p.id === product.id)}
                            onChange={() => handleProductSelect(product)}
                        />
                    </div>
                ))}
            </div>
            <h2 style={{ marginBottom: '20px' }}>支付方式选择</h2>
            <div style={{ marginBottom: '30px' }}>
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    marginBottom: '15px'
                }}>
                    <img src="https://img0.baidu.com/it/u=1342838034,2572121190&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800" alt="支付宝图标" style={{ width: '30px', height: '30px', marginRight: '10px' }} />
                    <label style={{ fontSize: '16px', color: '#333' }}>
                        <input
                            type="radio"
                            name="paymentMethod"
                            value="alipay"
                            checked={paymentMethod === 'alipay'}
                            onChange={() => handlePaymentMethodSelect('alipay')}
                            style={{ marginRight: '5px' }}
                        />
                        支付宝
                    </label>
                </div>
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    marginBottom: '15px'
                }}>
                    <img src="https://img1.baidu.com/it/u=4178276052,2020434306&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="微信图标" style={{ width: '30px', height: '30px', marginRight: '10px' }} />
                    <label style={{ fontSize: '16px', color: '#333' }}>
                        <input
                            type="radio"
                            name="paymentMethod"
                            value="wechat"
                            checked={paymentMethod === 'wechat'}
                            onChange={() => handlePaymentMethodSelect('wechat')}
                            style={{ marginRight: '5px' }}
                        />
                        微信
                    </label>
                </div>
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    marginBottom: '15px'
                }}>
                    <img src="https://img1.baidu.com/it/u=2214316438,2246949405&fm=253&fmt=auto&app=138&f=JPEG?w=594&h=475" alt="银联图标" style={{ width: '30px', height: '30px', marginRight: '10px' }} />
                    <label style={{ fontSize: '16px', color: '#333' }}>
                        <input
                            type="radio"
                            name="paymentMethod"
                            value="unionpay"
                            checked={paymentMethod === 'unionpay'}
                            onChange={() => handlePaymentMethodSelect('unionpay')}
                            style={{ marginRight: '5px' }}
                        />
                        银联
                        <span style={{ fontSize: '12px', color: '#999' }}>无需网银,支持100多家银行</span>
                    </label>
                </div>
                <div style={{
                    display: 'flex',
                    alignItems: 'center'
                }}>
                    <img src="https://img1.baidu.com/it/u=4287792737,1464737017&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="苹果支付图标" style={{ width: '30px', height: '30px', marginRight: '10px' }} />
                    <label style={{ fontSize: '16px', color: '#333' }}>
                        <input
                            type="radio"
                            name="paymentMethod"
                            value="applepay"
                            checked={paymentMethod === 'applepay'}
                            onChange={() => handlePaymentMethodSelect('applepay')}
                            style={{ marginRight: '5px' }}
                        />
                        苹果支付
                    </label>
                </div>
            </div>
            <button
                onClick={handlePaymentClick}
                style={{
                    backgroundColor: '#007bff',
                    color: 'white',
                    padding: '15px',
                    border: 'none',
                    borderRadius: '5px',
                    width: '100%',
                    fontSize: '16px',
                    cursor: 'pointer',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                }}
            >
                {isLoading? (
                    <span
                        style={{
                            border: '4px solid rgba(0, 0, 0, 0.1)',
                            borderTop: '4px solid #007bff',
                            borderRadius: '50%',
                            width: '20px',
                            height: '20px',
                            animation: 'spin 1s linear infinite',
                            marginRight: '10px'
                        }}
                    ></span>
                ) : (
                    '确认支付'
                )}
            </button>
            <div ref={oForm}></div>
        </div>
    );
}


const products = [
    {
        id: 1,
        name: '创意卫浴五件套 欧式高档卫生间洗漱...',
        price: 19.99
    },
    
];